import * as React from "react";
import {
  Text,
  StyleSheet,
  View,
  Modal,
  DatePickerIOS,
  Platform
} from "react-native";
import { Button } from "react-native-elements";
import DatePicker from "react-native-datepicker";
import "../Utils/common";

interface Props extends React.Props<any> {
  isDateTimePickerVisible: boolean;
  dateTimeCurrentValue: string;
  onCancel: () => void;
  onConfirm: (dateStr: string) => void;
}

interface State {
  tmpDatePickerValue: Date;
  curBackGroundColor: string;
}

export default class DateTimePicker extends React.Component<Props, State> {
  _universalDatePicker: any;

  constructor(props: Props) {
    super(props);
    this.state = {
      tmpDatePickerValue:
        this.props.dateTimeCurrentValue.length > 0
          ? new Date(this.props.dateTimeCurrentValue.split(" ")[0])
          : new Date(),
      curBackGroundColor: "transparent"
    };
  }

  render() {
    return Platform.OS === "ios" ? (
      <Modal
        visible={this.props.isDateTimePickerVisible}
        animationType="slide"
        transparent
        onShow={() => {
          this.setState({
            curBackGroundColor: "rgba(0,0,0,0.3)"
          });
        }}
        onDismiss={() => {
          this.setState({
            curBackGroundColor: "transparent"
          });
        }}
      >
        <View
          style={[
            styles.containerStyle,
            { backgroundColor: this.state.curBackGroundColor }
          ]}
        >
          <DatePickerIOS
            style={styles.datePickerStyle}
            date={this.state.tmpDatePickerValue}
            onDateChange={(date: Date) => {
              this.setState({ tmpDatePickerValue: date });
            }}
            maximumDate={new Date()}
            minimumDate={new Date("2000-01-31")}
            mode="date"
          />
          <View style={styles.menuStyle}>
            <Button
              title={"取消"}
              containerStyle={{ marginLeft: 12 }}
              buttonStyle={styles.buttonStyle}
              titleStyle={{ fontSize: 15 }}
              onPress={this._cancelDateTimePicker}
            />
            <Text style={styles.textStyle}>选择日期</Text>
            <Button
              title={"确定"}
              containerStyle={{ marginRight: 12 }}
              buttonStyle={styles.buttonStyle}
              titleStyle={{ fontSize: 15 }}
              onPress={this._confirmHandleDatePicked}
            />
          </View>
        </View>
      </Modal>
    ) : (
      this._androidDatePicker()
    );
  }

  componentWillReceiveProps(nextProps: Props) {
    this.setState({
      tmpDatePickerValue:
        nextProps.dateTimeCurrentValue.length > 0
          ? new Date(nextProps.dateTimeCurrentValue.split(" ")[0])
          : new Date()
    });
  }

  componentDidMount() {}

  _cancelDateTimePicker = () => {
    this.props.onCancel();
  };

  _confirmHandleDatePicked = () => {
    let result = this.state.tmpDatePickerValue.format("yyyy-MM-dd hh:mm:ss");
    this.props.onConfirm(result);
  };

  _androidDatePicker = () => {
    return (
      <DatePicker
        ref={(ref: any) => {
          this._universalDatePicker = ref;
        }}
        style={{ width: 200 }}
        date={this.state.tmpDatePickerValue}
        mode="date"
        placeholder="选择日期"
        format="YYYY-MM-DD"
        minDate={new Date("2000-01-31")}
        maxDate={new Date()}
        confirmBtnText="确认"
        cancelBtnText="取消"
        showIcon={false}
        hideText
        customStyles={{
          dateIcon: {
            position: "absolute",
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }
        }}
        onDateChange={(_: string, date: Date) => {
          let result = date.format("yyyy-MM-dd hh:mm:ss");
          this.props.onConfirm(result);
        }}
      />
    );
  };

  public showDatePicker = () => {
    if (Platform.OS !== "ios") {
      this._universalDatePicker.onPressDate();
    }
  };
}

const styles = StyleSheet.create({
  buttonStyle: {
    borderRadius: 3,
    backgroundColor: "tomato",
    height: 32
  },
  datePickerStyle: {
    justifyContent: "flex-end",
    height: 219,
    backgroundColor: "white"
  },
  menuStyle: {
    height: 44,
    backgroundColor: "#34d412",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  containerStyle: {
    flex: 1,
    flexDirection: "column-reverse"
  },
  textStyle: {
    fontSize: 16,
    color: "#333"
  }
});
